<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <van-nav-bar
      title="收银台"
      left-text="返回"
      left-arrow
      @click-left="goBack"
      fixed
      placeholder
    />
    
    <!-- 订单信息 -->
    <view class="order-info">
      <view class="info-header">
        <van-icon name="description" color="#07c160" size="24" />
        <text class="header-text">订单信息</text>
      </view>
      <view class="info-item">
        <text class="label">交易单号:</text>
        <text class="value">{{ transactionId }}</text>
      </view>
      <view class="info-item">
        <text class="label">订单单号:</text>
        <text class="value">{{ orderId }}</text>
      </view>
      <view class="info-item">
        <text class="label">订单时间:</text>
        <text class="value">{{ orderTime }}</text>
      </view>
    </view>
    
    <!-- 商品信息 -->
    <view class="product-info">
      <view class="info-header">
        <van-icon name="shopping-cart-o" color="#07c160" size="24" />
        <text class="header-text">商品信息</text>
      </view>
      <view class="merchant-info">
        <text class="label">商户名称:</text>
        <text class="value">{{ merchantName }}</text>
      </view>
      <view class="product-details">
        <text class="label">商品明细:</text>
        <view class="product-item">
          <text class="product-name">{{ productName }}</text>
          <text class="product-quantity">{{ productQuantity }}</text>
          <text class="product-price">单价: ¥{{ consultationPrice.toFixed(2) }}</text>
        </view>
      </view>
      <view class="price-summary">
        <text class="total-label">总计:</text>
        <text class="total-price">¥{{ consultationPrice.toFixed(2) }}</text>
      </view>
      <view class="price-summary">
        <text class="actual-label">实付:</text>
        <text class="actual-price">¥{{ consultationPrice.toFixed(2) }}</text>
      </view>
    </view>
    
    <!-- 支付方式 -->
    <view class="payment-methods">
      <view class="info-header">
        <van-icon name="cashier-o" color="#07c160" size="24" />
        <text class="header-text">支付方式</text>
      </view>
      <view class="method-item">
        <van-radio-group v-model="selectedPaymentMethod">
          <van-radio name="wechat" class="payment-radio">
            <view class="payment-method-content">
              <image src="/static/icon/wechat.png" class="payment-icon" />
              <text class="payment-text">微信支付</text>
            </view>
          </van-radio>
          <van-radio name="bank" class="payment-radio">
            <view class="payment-method-content">
              <image src="/static/icon/bank.png" class="payment-icon" />
              <text class="payment-text">建设银行银行卡支付</text>
            </view>
          </van-radio>
        </van-radio-group>
      </view>
    </view>
    
    <!-- 其他支付 -->
    <view class="other-payment">
      <view class="info-header">
        <van-icon name="cashier-o" color="#07c160" size="24" />
        <text class="header-text">其他支付</text>
      </view>
      <view class="method-item">
        <van-radio name="friend" class="payment-radio">
          <view class="payment-method-content">
            <image src="/static/icon/wechat.png" class="payment-icon" />
            <text class="payment-text">微信好友代付 (老年人推荐)</text>
          </view>
        </van-radio>
      </view>
    </view>
    
    <!-- 底部支付按钮 -->
    <view class="bottom-action">
      <view class="total-section">
        <text class="total-text">合计:</text>
        <text class="total-amount">¥{{ consultationPrice.toFixed(2) }}</text>
      </view>
      <van-button 
        type="primary" 
        size="large"
        @click="payNow"
        class="pay-btn"
      >
        立即支付
      </van-button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

// 响应式数据
const doctorId = ref('')
const doctorName = ref('')
const departmentName = ref('')
const consultationPrice = ref(0)
const cardId = ref('')
const cardName = ref('')
const selectedPaymentMethod = ref('wechat')

// 订单信息
const transactionId = ref('')
const orderId = ref('')
const orderTime = ref('')
const merchantName = ref('四川大学华西医院')
const productName = ref('在线门诊')
const productQuantity = ref('1次')

// 生成订单信息
const generateOrderInfo = () => {
  const now = new Date()
  const timestamp = now.getTime()
  
  // 生成交易单号：年月日时分秒+随机数
  const dateStr = now.getFullYear().toString() +
    String(now.getMonth() + 1).padStart(2, '0') +
    String(now.getDate()).padStart(2, '0') +
    String(now.getHours()).padStart(2, '0') +
    String(now.getMinutes()).padStart(2, '0') +
    String(now.getSeconds()).padStart(2, '0')
  
  transactionId.value = dateStr + Math.floor(Math.random() * 1000).toString().padStart(3, '0')
  orderId.value = Math.floor(Math.random() * 10000000000000000).toString()
  orderTime.value = now.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 立即支付
const payNow = () => {
  if (!selectedPaymentMethod.value) {
    uni.showToast({
      title: '请选择支付方式',
      icon: 'none'
    })
    return
  }
  
  console.log('开始支付，支付方式:', selectedPaymentMethod.value)
  
  // 模拟支付过程
  uni.showLoading({
    title: '支付中...'
  })
  
  setTimeout(() => {
    uni.hideLoading()
    
    // 支付成功
    uni.showToast({
      title: '支付成功',
      icon: 'success'
    })
    
    // 跳转到支付成功页面或返回
    setTimeout(() => {
      uni.navigateBack({
        delta: 3 // 返回到医生选择页面
      })
    }, 1500)
  }, 2000)
}

// 返回上一页
const goBack = () => {
  uni.navigateBack()
}

// 页面加载
onLoad((options: Record<string, string>) => {
  console.log('收银台页面 onLoad', options)
  
  doctorId.value = options.doctorId || ''
  doctorName.value = options.doctorName || ''
  departmentName.value = options.departmentName || ''
  consultationPrice.value = parseFloat(options.consultationPrice || '0')
  cardId.value = options.cardId || ''
  cardName.value = options.cardName || ''
  
  console.log('接收到的参数:', {
    doctorId: doctorId.value,
    doctorName: doctorName.value,
    departmentName: departmentName.value,
    consultationPrice: consultationPrice.value,
    cardId: cardId.value,
    cardName: cardName.value
  })
  
  // 生成订单信息
  generateOrderInfo()
})
</script>

<style lang="scss" scoped>
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

.order-info, .product-info, .payment-methods, .other-payment {
  background: white;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
}

.info-header {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.header-text {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.label {
  font-size: 28rpx;
  color: #333;
}

.value {
  font-size: 28rpx;
  color: #666;
  max-width: 400rpx;
  text-align: right;
  word-break: break-all;
}

.merchant-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.product-details {
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
}

.product-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20rpx;
}

.product-name {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.product-quantity {
  font-size: 28rpx;
  color: #666;
  margin: 0 40rpx;
}

.product-price {
  font-size: 28rpx;
  color: #07c160;
  font-weight: bold;
}

.price-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  
  &:last-child {
    border-bottom: none;
  }
}

.total-label, .actual-label {
  font-size: 28rpx;
  color: #333;
}

.total-price {
  font-size: 28rpx;
  color: #666;
}

.actual-price {
  font-size: 32rpx;
  color: #ff4757;
  font-weight: bold;
}

.method-item {
  padding: 20rpx 0;
}

.payment-radio {
  width: 100%;
  margin-bottom: 20rpx;
}

.payment-method-content {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
}

.payment-icon {
  width: 40rpx;
  height: 40rpx;
}

.payment-text {
  font-size: 28rpx;
  color: #333;
}

.bottom-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  background: white;
  border-top: 1rpx solid #f0f0f0;
}

.total-section {
  display: flex;
  align-items: center;
  gap: 10rpx;
}

.total-text {
  font-size: 28rpx;
  color: #333;
}

.total-amount {
  font-size: 36rpx;
  color: #ff4757;
  font-weight: bold;
}

.pay-btn {
  background: #07c160;
  border: none;
  border-radius: 25rpx;
  height: 88rpx;
  font-size: 32rpx;
  font-weight: bold;
  min-width: 300rpx;
}
</style>
